/**
 * Created By li.zhou
 * Refactored By ZaraNengap 2018/9/4
 * 组件库
 */
import React from 'react';
import { Layout, Menu } from 'antd';
const SubMenu = Menu.SubMenu;
const { Content, Sider } = Layout;
import componentDocData from 'containers/component-lib/component-doc-data'
import ComponentTemplate from 'containers/component-lib/component-template'

class ComponentLib extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      nowComponent: componentDocData.systemComponents[24],
      refreshComponentFlag: true  //刷新组件
    };
  }

  handleSelect = (item) => {
    componentDocData.systemComponents.map(data => {
      data.key === item.key && this.setState({
        nowComponent: data, refreshComponentFlag: false
      }, () => {
        this.setState({ refreshComponentFlag: true });
        window.scrollTo(0, 0);
      })
    });
    componentDocData.businessComponent.map(data => {
      data.key === item.key && this.setState({
        nowComponent: data, refreshComponentFlag: false
      }, () => {
        this.setState({ refreshComponentFlag: true });
        window.scrollTo(0, 0);
      })
    });
  };

  render() {
    const { nowComponent, refreshComponentFlag } = this.state;
    return (
      <Layout style={{ background: '#fff', height: '100%', paddingBottom: 24 }}>
        <Sider width={250} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['wrap-form-item']}
            defaultOpenKeys={['system', 'business']}
            style={{ height: '100%' }}
            onSelect={this.handleSelect}
          >
            <SubMenu key="system" title="系统组件">
              {componentDocData.systemComponents.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)}
            </SubMenu>
            <SubMenu key="business" title="业务组件">
              {componentDocData.businessComponent.map(item => <Menu.Item key={item.key}>{item.name}</Menu.Item>)}
            </SubMenu>
          </Menu>
        </Sider>
        <Content style={{ padding: '0 24px' }}>
          {refreshComponentFlag && <ComponentTemplate component={nowComponent}/>}
        </Content>
      </Layout>
    );
  }
}

export default ComponentLib;
